<template>
  <view class="container flex-items-plus flex-column" :style="{ backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/login/bg.png)` }">
    <global-loading />
    <view class="login-logoBox">
      <image class="login-logo" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/login/logo.png`"></image>
    </view>
    <view class="loginTitle-text font-color-666 fs26"> 为了给您提供更好的服务,我们需要您的授权哦~ </view>
    <view>
      <!-- #ifdef MP-WEIXIN -->
      <button class="loginBut fs28" @click="GetUserInfo">手机号快捷登录</button>
      <button class="goToHome fs28" @click="goToHome">去首页逛逛</button>
      <!-- #endif -->
      <!-- #ifdef MP-ALIPAY -->
      <button class="loginBut fs28" @click="GetAliPayUserInfo">支付宝登录</button>
      <!-- #endif -->
      <!-- #ifndef MP-ALIPAY -->
      <view class="loginBut fs28" v-if="noMp" @click="goLogin">手机号登录</view>
      <!-- #endif -->
    </view>
    <view class="mar-top-30 register-text" v-if="noMp" @click="goRegister">还没有账号，去注册</view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { request } from "@/utils/request";
import API from "@/config/api";
import { onShow, onLoad, onBackPress } from "@dcloudio/uni-app";
import { VUE_APP_STATIC_URL } from "@/config/api";

const WXloginQuery = ref({
  code: "",
  salesId: 0,
  // headImage: "",
  terminal: 1,
});
const noMp = ref(false);
onLoad(options => {
  // #ifndef MP
  noMp.value = true;
  // #endif
  // const pages = getCurrentPages()
  // console.log(pages.length, 'pages-test')
  // uni.setStorageSync('last_page', pages[pages.length - 1].route);
  // if (pages[pages.length - 1].options) {
  // 	uni.setStorageSync('last_page_options', pages[pages.length - 1].options);
  // }
});
onShow(() => {
  // 所有需要授权页面进登录页面取消loading
  uni.hideLoading();
});
onBackPress(() => {
  uni.switchTab({
    url: "/pages/tabbar/index/index",
  });
  return true;
});
const back = () => {
  uni.switchTab({
    url: "/pages/tabbar/index/index",
  });
};
const goLogin = () => {
  uni.navigateTo({
    url: "accountLogin",
  });
};
const goRegister = () => {
  uni.navigateTo({
    url: "register",
  });
};
// 微信登录
const GetUserInfo = async () => {
  // #ifdef MP-WEIXIN
  uni.login({
    provider: "weixin",
    success: res2 => {
      uni.hideLoading();
      WXloginQuery.value.code = res2.code;
    },
    fail: () => {
      uni.showToast({
        title: "微信登录授权失败",
        icon: "none",
      });
    },
  });
  uni.getUserProfile({
    desc: "正在获取", // 不写不弹提示框
    success: async function (res) {
      console.log("loginRes=", res);
      // WXloginQuery.value.headImage = res.userInfo.avatarUrl;
      try {
        const res = await request(API.WxLogin, WXloginQuery.value, "POST");
        let data = {
          wechatOpenId: res.data.wechatOpenId,
          headImage: res.data.headImage,
        };
        loginSuc(res.data, data);
      } catch (erorr) {
        console.log("wxLogin failed", err);
      }
    },
    fail: function (err) {
      uni.showToast({
        title: "微信登录授权失败",
        icon: "none",
      });
    },
  });
  // #endif
};
const GetAliPayUserInfo = () => {
  uni.login({
    provider: "alipay",
    scopes: "auth_user",
    success: function (loginRes) {
      alipayLogin(loginRes.authCode);
    },
  });
};
const alipayLogin = async authCode => {
  try {
    const response = await request(
      API.AlipayLogin,
      {
        code: authCode,
      },
      "POST"
    );
    loginSuc(response.data, {
      buyerUserId: response.data.buyerUserId,
    });
  } catch (error) {
    console.log("alipayLogin failed", error);
  }
};
const goToHome = () => {
  uni.switchTab({
    url: "/pages/tabbar/index/index",
  });
};
const loginSuc = (buyerUser, data) => {
  if (buyerUser.ifFirst == 0) {
    uni.setStorageSync("storage_key", buyerUser);
    bindSalesCustomer();
    const last_page = uni.getStorageSync("last_page") || "";
    if (last_page) {
      if (last_page === "zwx_category_page2/userModule/login") {
        // 如果最后一个是登录
        uni.switchTab({
          url: "/pages/tabbar/index/index",
        });
        return;
      }
      const last_page_options = uni.getStorageSync("last_page_options") || "";
      const str = JSON.stringify(last_page_options).replace(/[{}"]/g, "").replace(/:/g, "=").replace(/,/g, "&");
      // 清空其他路由，直接跳转最后登录页面
      uni.reLaunch({
        url: `/${last_page}?${str}`,
        // url: `/${last_page}?` + str
      });
    } else {
      // #ifdef MP-ALIPAY
      uni.navigateTo({
        url: "/pages/tabbar/user/index",
      });
      // #endif
      // #ifndef MP-ALIPAY
      uni.switchTab({
        url: "/pages/tabbar/user/index",
      });
      // #endif
    }
  } else {
    // 第一次登录，绑定手机号
    uni.redirectTo({
      url: "bindPhone?data=" + JSON.stringify(data),
    });
  }
};

const bindSalesCustomer = async () => {
  const shopId = uni.getStorageSync("shopId");
  const salesId = uni.getStorageSync("salesId");
  if (shopId && salesId && shopId !== "" && salesId !== "") {
    try {
      const response = await request(
        API.BindSalesCustomer,
        {
          shopId: shopId,
          distributorId: salesId,
        },
        "POST"
      );
      uni.removeStorageSync("salesId");
      uni.removeStorageSync("shopId");
    } catch (error) {
      console.log("login bindSalesCustomer error");
      console.dir(error);
    }
  }
};
</script>

<style lang="scss">
.container {
  height: 100vh;
  background-position: top center;
  background-size: cover;

  .login-logoBox {
    margin-top: -200rpx;

    .login-logo {
      width: 218rpx;
      height: 220rpx;
    }
  }

  .loginTitle-text {
    width: 416rpx;
    margin: 50rpx auto 0;
    text-align: center;
  }

  .goToHome {
    background: none;
    border: none;
    width: auto;
    margin-top: 50rpx;
    color: #999999;
    text-decoration: underline;

    &:after {
      display: none;
    }
  }

  .loginBut {
    width: 640rpx;
    height: 78rpx;
    background: linear-gradient(90deg, #ff9000, #ff5000);
    border-radius: 39rpx;
    text-align: center;
    line-height: 78rpx;
    color: #fff;
    margin: 30rpx auto 0;
  }

  .register-text {
    color: #9f9f9f;
    font-size: 24rpx;
  }
}
</style>
<style scoped>
.loginWxBut::after {
  border-radius: 0 !important;
}
</style>
